<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>问卷星调查也/问卷登录页面仿制</title>
		<style>
			.big{
				width: 100%;
				height: 926px;
				background-image: url(img/bg.jpg);
				background-repeat: no-repeat;
				position: fixed;
				background-size: cover;
				background-position: center center;
			}
			.top{
				width: 100%;
				height: 86px;
				background-color: rgba(255, 255, 255, 0.0);
			}
			.top-left{
				width: 60px;
				height: 40px;
				padding: 0 60px;
			}
			.top-left img{
				margin-top: 30px;
				width:140px;
				height: 5;
			}
			.top-right-one{
				width: 130px;
				height: 3;
				margin-right: 30px;
				color: #fff;
				border: 1px solid #fff;
				margin-top: 30px;
				float: right;
				font-size: 18px;
				text-align: center;
				line-height: 3;
				border-radius: 100px;
			}
			.top a{
				text-decoration: none;
			}
			.text5 a{
				text-decoration: none;
				font-size: 14px;
				margin-top: -10px;
			}
			.text{
				width: 450px;
				height: 550px;
				background-color: #fff;
				margin-top: 70px;
				margin-left: 480px;
				border-radius: 15px;
				box-sizing: border-box;
			}
			.text1{
				width: 360px;
				height: 270px;
				margin: auto;
				position: relative;
				position: absolute;
				left: 520px;
			}
			.code{
				font-size: 22px;
				font-weight: 600;
				color: #8c8c8c;
				line-height: 32px;
				text-align: left;
				padding: 0;
				position: absolute;
				top: 10%;
				left: 30%;
				text-decoration: none;
			}
			.account{
				position: absolute;
				top: 10%;
				color: #262626;
				font-size: 22px;
				text-align: left;
				text-decoration: none;
			}
			.underline{
				width: 35px;
				height: 5px;
				background-color: #f79000;
				position: absolute;
				top: 58px;
				left: 30px;
			}
			.little{
				width: 250px;
				float: right;
				box-sizing: border-box;
				margin-right: 30px;
				color: #a4a4a5;
				text-align: left;
				margin-bottom: 10px;
			}
			li{
				list-style: none;
			}
			.text1-text1{
				width: 352px;
				height: 110px;
				margin: auto;
				position: relative;
				margin-top: 100px;
			}
			.name{
				width: 352px;
				height: 40px;
				position: absolute;
				left: 0px;
				border: 1px solid #e6e6e6;
			}
			.password{
				width: 352px;
				height: 40px;
				position: absolute;
				left: 0px;
				bottom: 0;
				border: 1px solid #e6e6e6;
			}
			.text1-text2{
				width: 320px;
				height: 40px;
				margin-top: 10px;
				position: relative;
			}
			.text1-text2 .remeber1  {
				color: #8c8c8c;
				width: 20px;
				height: 20px;
				position: absolute;
				left: 0%;
			}
			.text1-text2 .remeber2{
				color: #8c8c8c;
				font-size: 12px;
				position: absolute;
				left: 8%;
				top: 5px;
			}
			.forget{
				float: right;
				color: #8c8c8c;
				font-size: 12px;
			}
			.text2{
				width: 360px;
				height: 40px;
				position: absolute;
				left: 520px;
				top: 410px;
			}
			.btn1{
				width: 360px;
				height: 40px;
				background-color: #f79000;
				color: #fff;
				margin: auto;
				text-align: center;
				border: 1px solid #fff;
				font-size: 18px;
				padding: 8px;
			}
			.text3 a{
				margin-top: 2px;
				width: 310px;
				height: 30px;
				position: absolute;
				left: 540px;
				top: 460px;
				text-align: center;
				color: #0095ff;
			}
			.text4{
				width: 360px;
				height: 20px;
				position: absolute;
				left: 550px;
				top: 500px;
			}
			.text4 .line{
				display: inline-block;
				width: 100px;
				border: 1px solid #e6e6e6;
			}
			.word{
				color: #a6a6a6;
				font-size: 12px;
				padding: 0 16px;
			}
			.text5{
				width: 340px;
				height: 100px;
				position: absolute;
				left:530px;
				top: 540px;
			}
			.text5-item{
				width: 60px;
				height: 80px;
				float: left;
				padding-left: 51.7px;
			}
			.text5 img{
				width: 50px;
				height: 50px;
				background-size: cover;
			}
			.text5 p{
				font-size: 12px;
				color: #a5a5a5;
				margin-top: 8px;
				line-height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div class="top">
				<a href="https://www.wjx.cn/" class="top-left">
					<img src="./img/wjx-logo.jpg" alt="问卷星_不止问卷调查/在线考试">
				</a>
				<a href="#" class="top-right-one">注册</a>
				<a href="#"class="top-right-one">返回首页</a>
			</div>
			<div class="text">
				<div class="text1">
				<a href="#" class="account"> 账号登录</a>
				<a href="#" class="code"> 验证码登录</a>
				<div class="underline"></div>
			<ul class="text1-text1">	
				<li><input type="text" placeholder="用户名/Email/手机"  class="name" ></li>
				<li><input type="text" placeholder="请输入登录密码"  class="password"></li>
			</ul>
			<ul class="text1-text2">
				<input  type="checkbox" class="remeber1"><span class="remeber2"> 下次自动登录</span>
				<a href="#" class="forget">忘记用户名/密码？</a>
			</ul>
			</div>
			<div class="text2">
				<input class="btn1" type="submit" value="登录"></button>
			</div>
			<div class="text3">
			<a href="#" class="btn2">立即注册</a>
			</div>
			<div class="text4">
				<span class="line"></span>
				<em class="word">更多登录方式</em>
				<span class="line"></span>
			</div>
			<div class="text5">
				<div class="text5-item">
				<a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=204059&state=sojump&redirect_uri=https://www.wjx.cn%2fconn">
					<img src="./img/qqlogin.jpg" alt="">
					<p>QQ登录</p>
				</a></div>
				<div class="text5-item">
				<a href="https://www.wjx.cn/weixinlogin.aspx">
					<img src="./img/weixinlogin.jpg" alt="">
					<p>微信登录</p>
				</a></div>
				<div class="text5-item">
				<a href="https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=wwb835fa4352ca80df&redirect_uri=https%3a%2f%2fwww.wjx.cn%2fhtml%2fqywxredirect.html%3fredirect_uri%3dhttps%253a%252f%252fqywx.wjx.cn%252fmobile%252fqywx%252fmanage.aspx&state=web_login&usertype=member">
					<img src="./img/qywx.jpg" alt="">
					<p>企业微信</p>
				</a></div>
			</div>
			</div>
			<div class="little">
				<p " style="bottom:5px; font-size: 20px;">《登顶武功山》</p>
				<p " style=" font-size: 16px;">拍摄于问卷星团队二月徒步之旅</p>
			</div>
		</div>
	</body>
</html>
